<template>
	<div class="share-box">
		<div class="share">
			<div class="s_header">
				<img src="https://image.soole.com.cn/000011x.png" alt="">
			</div>
			
			
			<div class="center">
				<div class="pdt">
					<div class="pdt_img">
						<img :src="image_url" alt="">
					</div>
					<p class="pdt_text van-ellipsis">{{name}}</p>
				</div>
				
				<div class="s_bottom">
					<div class="s_lf">
						<div class="s_tiem">
							<p>还剩</p>
							<div class="pr_time">
								<ul>
									<li class='pr_timing color1'><span>{{hms.hours|stringJoints()}}</span></li>
									<li class='pr_pun'>:</li>
									<li class='pr_timing color1'><span>{{hms.minutes|stringJoints()}}</span></li>
									<li class='pr_pun'>:</li>
									<li class='pr_timing color1'><span>{{hms.seconds|stringJoints()}}</span></li>
								</ul>
							</div>
							<p>结束</p>
						</div>
						<p class="s_price_blo">单买价：<span class="blo">￥{{price*2}}</span></p>
						<div class="s_price_new">
							<div class="new"><span>￥</span>{{price}}</div>
							<div class="text">拼团价</div>
						</div>
					</div>
					<div class="s_rf">
						<img src="https://image.soole.com.cn/1575421450.png" alt="">
						<p>长按识别二维码</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				hms:{
					hours: "00",
					minutes: "00",
					seconds: "00"
				},
				image_url:this.$route.query.image_url,
				maxtime:this.$route.query.maxtime,
				name:this.$route.query.name,
				price:this.$route.query.price,
			}
		},
		mounted(){
			this.startTimer();
		},
		methods:{
			//倒计时
			countDown() {
				// let date = new Date();
				// let gl = date.getTime();
				// // 先算出剩余时间有多少小时，这些小时有多少个24小时 不满24小时的及为剩余多少小时
				// this.hours = Math.floor(maxtime / 60 % 24);
				// // 换算 多少分钟 满足60分的为小时数 不满60分的及为剩余分钟数
				// this.minutes = Math.floor(maxtime / 60 % 60);
				// // 满足60秒的为分钟数 不满60秒的及为剩余秒数
				// this.seconds = Math.floor(maxtime % 60);
				// //判断总的秒数是否小于=0 是则结束定时器
				// if (maxtime <= 0) {
				// 	return maxtime;
				// }
				let hms = {
					hours: Math.floor(this.maxtime / 60 / 60 % 24),
					minutes: Math.floor(this.maxtime / 60 % 60),
					seconds: Math.floor(this.maxtime  % 60)
				}
				this.hms = hms;
				// var msg = "距离结束还有"+ this.hours +"时"+ this.minutes + "分" + this.seconds + "秒";
				// console.log(msg);
			},
			// 设置定时器
			startTimer() {
				this.timer = setInterval(() => {
					this.countDown();
					//判断总的秒数是否小于=0 是则结束定时器
					if (this.maxtime <= 0) {
						clearInterval(this.timer);
						this.timer = null;
					}
					this.maxtime -= 1;
				}, 1000);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.share-box{
		position: relative;
		background-color: #FF1728;
	}
	.share{
		background-color: #FF1728;
		position: relative;
		// overflow: hidden;
		height: 100%;
		.s_header{
			background-color: #FF1728;
			position: absolute;
			width: 100%;
			padding-top: 13px;
			img{
				width: 100%;
			}
		}
		.center{
			background-color: #FF1728;
			position: absolute;
			top: 163px;
			width: 100%;
			padding-bottom: 60px;
			.pdt{
				width: 91%;
				margin: 0 auto;
				background-color: #fff;
				border-radius: 5px;
				padding-bottom: 10px;
				margin-bottom: 15px;
			}
			.pdt_img{
				box-sizing: border-box;
				padding:10px;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.pdt_text{
				width: 220px;
				color: #141414;
				font-size: 14px;
				margin: 0 auto;
				text-align: center;
			}
		}
		
		.s_bottom{
			display: flex;
			justify-content: space-between;
			width: 91%;
			margin: 0 auto;
			.s_lf{
				padding-top: 5px;
				.s_tiem{
					display: flex;
					font-size: 18px;
					font-weight: 600;
					color: #fff;
				}
				.pr_time {
					ul{
						display: flex;
						justify-content: center;
						font-size: 14px;
						font-weight: 600;
						align-items: center;
						margin-left: 7px;
						margin-right: 7px;
						.pr_pun{
							margin: 0 4px;
							color: #fff;
							font-size: 14px;
						}
						.pr_timing{
							border-radius: 3px;
							width: 25px;
							height: 25px;
							background-color: #FF1B32;
							position: relative;
							span{
								position: absolute;
								top:50%;
								left:50%;
								transform: translate(-50%,-50%);
							}
						}
						.color1{
							background-color: #fff;
							color: #FF1728;
						}
					}	
				}
				.s_price_blo{
					margin-top: 12px;
					color: #fff;
					.blo{
						font-size: 12px;
						text-decoration: line-through;
					}
				}
				.s_price_new{
					display: flex;
					align-items: center;
					.new{
						color: #FBF45D;
						font-size: 35px;
						span{
							font-size: 25px;
						}
						margin-right: 9px;
						
					}
					.text{
						color: #FF1728;
						background-color:#FBF45D;
						padding: 1px 3px;
						border-radius: 4px;
						height: 20px;
					}
				}
				
			}
			.s_rf{
				width: 104px;
				height: 104px;
				text-align: center;
				img{
					width: 100%;
					height: 100%;
				}
				p{
					margin-top: 5px;
					font-size: 12px;
					color: #fff;
				}
			}
			
		}
		
		
	}
</style>
